<template>
	<div style="margin: 40px; 40px;">
		<!--面包屑-->
		<el-breadcrumb style="margin-bottom: 15px;" separator="/">
			<el-breadcrumb-item><label style="font-size: 25px;color: black;">酒店信息</label></el-breadcrumb-item>
		</el-breadcrumb>
		<!---->
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
			<el-form-item label="酒店名称" prop="name">
				<el-input v-model="ruleForm.name" placeholder="请输入完整的酒店名称" style="width: 550px;" />
			</el-form-item>
			<el-form-item label="酒店电话" prop="tel">
				<el-input v-model="ruleForm.tel" placeholder="请输入座机号或者手机号" style="width: 550px;" />
			</el-form-item>
			<el-form-item label="酒店联系人" prop="linkName">
				<el-input v-model="ruleForm.linkName" placeholder="请输入酒店联系人" style="width: 550px;" />
			</el-form-item>
			<el-form-item label="酒店联系人电话" prop="linkTel">
				<el-input v-model="ruleForm.linkTel" placeholder="请输入酒店联系人电话" style="width: 550px;" />
			</el-form-item>
			<el-form-item label="图片验证码" prop="code">
				<el-input type="text" v-model="ruleForm.code" placeholder="请输入短信验证码" style="width: 550px;">
					<template slot="append">
						<div class="login-code" @click="refreshCode">
							<s-identify :identifyCode="identifyCode"></s-identify>
						</div>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="短信验证码">
				<el-input placeholder="请输入短信验证码" style="width: 550px;" />
			</el-form-item>
			<el-form-item label="酒店地址" prop="address">
				<el-button @click="centerDialogVisible" type="success">编辑地址定位</el-button>
				<mapSelect ref="ms" @on-select="addressSelectHandler"></mapSelect>
				<el-input v-if="ruleForm.address" v-model="ruleForm.address" style="width: 420px;"></el-input>
			</el-form-item>
			<el-form-item label="酒店星级" prop="star">
				<el-radio v-model="radio" label="1">一星以下/经济</el-radio>
				<el-radio v-model="radio" label="2">二星/实惠</el-radio>
				<el-radio v-model="radio" label="3">三星/舒适</el-radio>
				<el-radio v-model="radio" label="4">四星/高档</el-radio>
				<el-radio v-model="radio" label="5">五星/豪华</el-radio>
			</el-form-item>
			<el-form-item label="客房总数" prop="llNum">
				<el-input-number v-model="ruleForm.llNum" @change="handleChange" :min="1" :max="10"></el-input-number>
			</el-form-item>
			<el-form-item label="集团品牌" prop="region">
				<el-select placeholder="请选择活动区域">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="酒店介绍" prop="introduction">
				<el-input type="textarea" autosize placeholder="请输入内容" v-model="ruleForm.introduction" style="width: 550px;">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">提交入驻信息</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>

	</div>

</template>


<script>
	import mapSelect from '../../components/mapSelect.vue'
	import SIdentify from '../../components/SIdentify.vue'
	export default {
		components: {
			SIdentify,
			mapSelect
		},
		name: 'HotelInformation',
		data() {
			return {
				identifyCode: "",
				identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",
				radio: '1',
				textarea: '',
				ruleForm: {
					name: '',
					tel: '',
					linkName: '',
					linkTel: '',
					address: '',
					star: '',
					introduction: '',
					llNum: 1,
					code: ""
				},
				rules: {
					name: [{
							required: true,
							message: '请输入完整的酒店名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					tel: [{
							required: true,
							message: '请输入酒店电话座机或者手机号',
							trigger: 'blur'
						},
						// {
						// 	min: 3,
						// 	max: 10,
						// 	message: '长度在 3 到 10 个字符',
						// 	trigger: 'blur'
						// }
					],
					linkName: [{
						required: true,
						message: '请输入酒店联系人',
						trigger: 'blur'
					}],
					linkTel: [{
						required: true,
						message: '请输入酒店联系人电话',
						trigger: 'blur'
					}],
					introduction: [{
						required: true,
						message: '请输入酒店介绍',
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			addressSelectHandler(rootAddress, address, lat, lng) {
				this.addressSelect = rootAddress + "," + address + '=====lat:' + lat + ',lng:' + lng
				// 省市区数据  如 ‘福建省、厦门市、思明区’
				console.log(rootAddress)
				// 选择地址 如：‘观音上商务区4号楼’
				console.log(address)
				// 经度
				console.log(lat)
				// 纬度
				console.log(lng)
				this.ruleForm.address = rootAddress + "," + address
			},
			centerDialogVisible() {
				this.$refs.ms.show()
				//根据省市区设置初始值
				this.$refs.ms.setLocationByAddress('湖南省、长沙市、岳麓区')
				// 根据经纬度设置初始值
				// this.$refs.ms.setLocationByLatLng(39.98174, 116.30631)
			},
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			randomNum(min, max) {
				max = max + 1
				return Math.floor(Math.random() * (max - min) + min)
			},
			// 随机生成验证码字符串
			makeCode(data, len) {
				for (let i = 0; i < len; i++) {
					this.identifyCode += data[this.randomNum(0, data.length - 1)]
				}
			},
			handleChange(value) {
				console.log(value);
			},
			submitForm: function() {
				if (this.ruleForm.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
					this.$message.error('请填写正确验证码')
					this.refreshCode()
					return
				}

				this.axios.post(this.axios.urls.SYS_ADMIN_DOSJRZ, this.ruleForm).then((response) => {
					let data = response.data
					this.$message({
						message: data.message,
						type: 'success',
					})
					// if (!this.Contact.lkmId) {
					// 	this.Contact.lkmCustNo = null
					// 	this.Contact.lkmName = null
					// 	this.Contact.lkmSex = null
					// 	this.Contact.lkmPostion = null
					// 	this.Contact.lkmTel = null
					// 	this.Contact.lkmMobile = null
					// 	this.Contact.lkmMemo = null
					// }
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
		created() {
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
		}
	}
</script>

<style>
</style>
